<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东注册页面</title>
    <link href="css/leisure.css" rel="stylesheet">
</head>
<body>
    <div id="header" class="main">
        <div id="headerLeft">
            <img src="images/JDicon.png" />
        </div>
        <div id="headerRight">注册 | 登录 | 帮助</div>
    </div>
    <div class="register">
        <form method="post" name="myform" id="myform">
                <h1 class="bold">注册京东会员</h1>
                <dl>
                    <dt>您的Email：</dt>
                    <dd><input id="email" type="text" class="inputs" /><span id="DivEmail"></span></dd>
                </dl>
                <dl>
                    <dt>输入密码：</dt>
                    <dd><input id="pwd" type="password" class="inputs" /><span id="DivPwd"></span></dd>
                </dl>
                <dl>
                    <dt>再输入一遍密码：</dt>
                    <dd><input id="repwd" type="password" class="inputs" /><span id="DivRepwd"></span></dd>
                </dl>
                <dl>
                    <dt>您的姓名：</dt>
                    <dd><input id="user" type="text" class="inputs" /><br><span id="DivUser"></span></dd>
                </dl>
                <dl>
                    <dt>性别：</dt>
                    <dd>
                        <input name="sex" type="radio" value="1" checked="checked" />男
                        <input name="sex" type="radio" value="0" />女</dd>
                </dl>
                <dl>
                    <dt class="left">出生日期：</dt>
                    <dd><select name="year">
                            <option value="1998">1998</option>
                        </select>年
                         <select name="month">
                             <option value="1">1</option>
                         </select>月
                       <select name="day">
                           <option value="12">12</option>
                       </select>日</dd>
                </dl>
                <dl>
                    <dt>&nbsp;</dt>
                    <dd><input name="btn" type="submit" value="注册" class="rb1" /></dd>
                </dl>
        </form>
    </div>
    <div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a>  | <a href="#">帮助中心</a></div>
   <script src="js/jquery-1.12.4.js"></script>
    <script>
      $(document).ready(function(){
          //绑定失去焦点事件
          $("#email").blur(checkEmail);
          $("#pwd").blur(checkPass);
          $("#repwd").blur(checkRePass);
          $("#user").blur(checkUser);

         //提交表单,调用验证函数
          $("#myform").submit(function () {
              var flag = true;
              if (!checkEmail()) flag = false;
              if (!checkPass()) flag = false;
              if (!checkRePass()) flag = false;
              if (!checkUser()) flag = false;
              return flag;
          });
      })
      //验证Email
      function checkEmail() {
          var $mail = $("#email");
          var $divID = $("#DivEmail");
          $divID.html("");
          if ($mail.val() == "") {
              $divID.html("Email不能为空");
              return false;
          }
          if ($mail.val().indexOf("@") == -1) {
              $divID.html("Email格式不正确，必须包含@");
              return false;
          }
          if ($mail.val().indexOf(".") == -1) {
              $divID.html("Email格式不正确，必须包含.");
              return false;
          }
          return true;
      }
      //验证输入密码
      function checkPass() {
          var $pwd = $("#pwd");
          var $divID = $("#DivPwd");
          $divID.html("");
          if ($pwd.val() == "") {
              $divID.html("密码不能为空");
              return false;
          }
          if ($pwd.val().length < 6) {
              $divID.html("密码必须等于或大于6个字符");
              return false;
          }
          return true;
      }
      //验证重复密码
      function checkRePass() {
          var $pwd = $("#pwd"); //输入密码
          var $repwd = $("#repwd");  //再次输入密码
          var $divID = $("#DivRepwd");
          $divID.html("");
          if ($pwd.val() != $repwd.val()) {
              $divID.html("两次输入的密码不一致");
              return false;
          }
          return true;
      }
      //验证用户名
      function checkUser() {
          var $user = $("#user");
          var $divID = $("#DivUser");
          $divID.html("");
          if ($user.val() == "") {
              $divID.html("姓名不能为空");
              return false;
          }
          for (var i = 0; i < $user.val().length; i++) {
              var j = $user.val().substring(i, i + 1)
              if (j >= 0) {
                  $divID.html("姓名中不能包含数字");
                  return false;
              }
          }
          return true;
      }
 </script>

</body>
</html>
